<template>
    <view class="content">
        <a-demo title="基础使用">
            <pure-button :text="tips" @onClick="handleSendSMSCode" :disabled="isCountdown" class="pure-button-primary"></pure-button>
        </a-demo>
    </view>
</template>

<script setup>
    import { ref, computed } from "vue";
    import { usePureCodeCountdown } from "@/uni_modules/pure-code-countdown";

    // 按钮默认文本
    const btnText = ref("发送验证码");
    // 倒计时总秒数
    const totalSeconds = ref(30);

    // 按钮提示
    const tips = computed(() => {
        // 正在倒计时中
        if (isCountdown.value) {
            return `${seconds.value}s后重新获取`;
        }
        return btnText.value;
    });

    // 使用
    const { seconds, start, isCountdown } = usePureCodeCountdown("in-page-code-countdown", totalSeconds, countdownEndFn);

    // 倒计时结束函数
    function countdownEndFn() {
        console.log("倒计时结束");
        btnText.value = "重新发送";
    }

    // 发送验证码
    function handleSendSMSCode() {
        start();
    }
</script>

<style scoped></style>
